<template>
	<view class="content">
    <view class="nav">
        <view class="left-title">
          <van-icon name="arrow-left" @click="exitBtn" style="margin-right: 4px;vertical-align: middle;"/>
          首页
        </view>
<!--        <view class="right-btn" @click="openPopver">-->
        <view class="right-btn">
          <text>{{titleSelect}}</text>
          <img v-if="showPicker" src="../../static/img/upward.png" alt="">
          <img v-else src="../../static/img/sj.png" alt="">
        </view>
      </view>
    <view class="header-bar">
      <ul class="menu">
        <li
          v-for="(item,index) in menuList"
          :key="index"
          v-if="item.auth.includes(roleAuth)"
          @click="chooseMenu(item,index)">
          <img :src=item.imgUrl alt="">
          <text class="title-menu">{{ item.title }}</text>
          <text class="todoNum" v-if="item.title === '待办工单' && todoNum != 0">{{ todoNum }}</text>
        </li>
      </ul>
    </view>
    <view class="home-main">
      <view class="title-home" v-if="roleAuth !== 'TOUR_GROUP'">
        <text class="big-title">巡视概况</text>
      </view>
      <view class="task-complate" v-if="roleAuth !== 'TOUR_GROUP'">
        <div class="overview-wrap">
          <div class="Overview-item" v-for="(item) in overviewMap">
            <div class="item-num" :style="{color: item.fontColor}">{{ item.count }}</div>
            <div class="item-title">{{ item.title }}</div>
          </div>
        </div>
      </view>
      <view class="title-home">
        <text class="big-title">工单完成情况</text>
      </view>
      <view class="task-complate">
        <div class="task-statistics" v-if="false">
          <div class="statistics-item" v-for="(item) in taskStatistics" @click="goTaskList(item)">
            <div class="item-num">{{ item.count }}</div>
            <div class="item-title">{{ item.title }}</div>
          </div>
        </div>
        <echarsBox :style="{height: barChartHeight}" v-bind="taskEchart"/>
      </view>
      <view class="title-home" v-if="roleAuth === 'TOUR_GROUP'">
        <text class="big-title">工单进度监控</text>
<!--        <text style="color: #417ADC; float: right;">更多</text>-->
      </view>
      <view class="task-complate" v-if="roleAuth === 'TOUR_GROUP'">
        <ul class="task-switch">
          <li v-for="(item,index) in taskSwitchList" :key="index" @click="chooseTask(item)" :class="{selectmenu:item.type === taskCurrent.type}">
            <text>{{item.title}}</text>
          </li>
        </ul>
        <!-- <ul class="manage-task-switch" v-if="roleAuth === 'MANAGE'">
          <li v-for="(item,index) in manageSwitchList" :key="index" @click="glyChooseTask(item)" :class="{selectmenu:item.type === glyTaskCurrent.type}">
            <text>{{item.title}}</text>
          </li>
        </ul> 弃用-->
        <view class="task-echarts">
          <echartsPie style="height: 183px;" v-bind="progessEchart" v-if="false"></echartsPie>
          <echartsPie style="height: 183px;" v-bind="manageProgessEchart" v-if="titleManage !=='临时工单'"></echartsPie>
          <echartsPie style="height: 183px;" v-bind="manageLsProgessEchart" v-if="titleManage ==='临时工单'"></echartsPie>
        </view>

      </view>
    </view>
    <tabBar :current="bottomTab" :list="list"></tabBar>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker  show-toolbar value-key="text" :columns="columns" @cancel="showPicker = false" @confirm="pickerConfirm" />
    </van-popup>
	</view>
</template>

<script>
import echarsBox from '../../components/common/echartBox'
import echartsPie from '../../components/common/echartsPie'
import tabBar from '../../components/common/tabBar'
import { mapGetters,mapMutations } from 'vuex'
import baseConfig from "../../common/config";

let overviewMap = [
  {
    count: 0,
    title: '累计巡视工单',
    key: 'todayTaskNumtotal',
    fontColor: '#5494FF',
  },
  {
    count: 0,
    title: '今日巡视工单',
    key: 'todayTaskNum',
    fontColor: '#5494FF',
  },
  {
    count: 0,
    title: '累计巡视人次',
    key: 'todayPeopleNumtotal',
    fontColor: '#FFBA2C',
  },
  {
    count: 0,
    title: '今日巡视人次',
    key: 'todayPeopleNum',
    fontColor: '#FFBA2C',
  },
]

let taskStatistics = [
  { // 全部
    apiKeys: 'QB',
    count: 0,
    title: '全部工单总数',
    isSelected: false,
  },
  { // 未完成
    apiKeys: 'WWC',
    count: 0,
    title: '未完成工单总数',
    isSelected: false,
  },
  { // 已完成
    apiKeys: 'YWC',
    count: 0,
    title: '已办工单总数',
    isSelected: false,
  }
]

export default {
  components: {echarsBox,echartsPie,tabBar},
  data() {
    return {
      todoNum:'',
      showPicker: false,
      titleSelect:'2023春检',
      columns: [
        // 第一列
        {
          index: 0,
          text: '2023春检'
        },{
          index: 1,
          text: '2023秋检'
        }
      ],
      menuList:[
        {
          imgUrl: require('../../static/img/selectAll.png'),
          title:'工单领取',
          auth: ["TOUR_GROUP"],
        },
        {
          imgUrl: require('../../static/img/xsrw.png'),
          title:'计划工单',
          auth: ["TOUR_GROUP"],
        },
        {
          imgUrl: require('../../static/img/lsrw.png'),
          title:'临时工单',
          auth: ["TOUR_GROUP"],
        },
        {
          imgUrl: require('../../static/img/dbrw.png'),
          title:'待办工单',
          auth: ["TOUR_GROUP"],
        },
        {
          imgUrl: require('../../static/img/selectFinish.png'),
          title:'已办工单',
          auth: ["TOUR_GROUP"],
        },
        {
          imgUrl:require('../../static/img/rwjk.png'),
          title:'工单监控',
          auth: ["SUPERMANAGE", "MANAGE_PROVINCE", "DISPATCH_PROVINCE", "MANAGE_CITY", "DISPATCH_CITY"],
        },
        {
          imgUrl:require('../../static/img/rwsp.png'),
          title:'工单审批',
          auth: ["SUPERMANAGE", "MANAGE_PROVINCE", "MANAGE_CITY"],
        },
        {
          imgUrl:require('../../static/img/01.png'),
          title:'工单统计',
          auth: ["SUPERMANAGE", "MANAGE_PROVINCE", "DISPATCH_PROVINCE", "MANAGE_CITY", "DISPATCH_CITY"],
        }
      ],

      taskSwitchList:[
        {
          title:'计划工单',
          type: 'XS',
          index:'1'
        },
        {
          title:'临时工单',
          type: 'LS',
          index:'2'
        }
      ],
      manageSwitchList:[
        {
          title:'全部工单',
          type:'QB',
          index:'0'
        },
        {
          title:'计划工单',
          type:'XS',
          index:'1'
        },
        {
          title:'临时工单',
          type:'LS',
          index:'2'
        }
      ], // 弃用
      taskCurrent: {
          title:'计划工单',
          type: 'XS',
          index:'1'
      },
      glyTaskCurrent: {
        title:'全部工单',
        type:'QB',
        index:'0'
      },
      bottomTab:0,
      list:[
        {
          text: "首页", // 页面标题
          icon: require("../../static/img/noSelectHome.png"), //未选中图标
          icon_a: require("../../static/img/selectHome.png"), //选中图片
          path: "/pages/index/index",
        },
        {
          text: "我的",
          icon: require("../../static/img/noSelectMine.png"),
          icon_a: require("../../static/img/selectMine.png"),
          path: "/pages/mine/mine",
        },
      ],
      taskComplete: [],// 工单完成情况数据
      taskProgressCount:  {},// 工单进度监控数据
      titleManage:'',
      account:'',
      overviewMap: overviewMap, // 工单概况
      taskStatistics: taskStatistics, // 工单监控统计
      barChartHeight: '200px',
    };
  },
  watch: {},
  onLoad() {
    this.titleSelect = this.userData.batchName;
    this.userDataSet(this.userData);
    this.getOverviewData();
    this.getCompletion();
    this.getToDoNum()
    this.getMission();
  },
  computed: {
    ...mapGetters(['userData', 'roleAuth']),
    taskEchart () {
      const xData = this.taskComplete.map(item => item.SOURCE).reverse();
      let yData = {
        QB: [],
        WWC: [],
        YWC: [],
      }

      this.barChartHeight = 200 + (xData.length - 2) * 50 + 'px';

      this.taskComplete.forEach(item => {
        Object.keys(item).forEach(key => {
          yData[key] ? (yData[key].push(item[key])): null;
        })
      })

      yData = [yData.QB.reverse(), yData.WWC.reverse(), yData.YWC.reverse()]
      const charData = {
        boxType: 'barYLine',
        xData: xData,
        yData: yData,
        legendData:['全部工单','未完成工单','已办工单'],
        color: ['#5494FF','#FF7271','#2EDD91'],
        legendConfig:{
          orient: 'horizontal',
          left:'center',
          align:'left',
          top:'10px',
        },
        grid: {top: '50px', left: '4%', right: '10%', bottom: '6px', containLabel: true},
      };
      console.log(charData, "charData")
      return charData;
    },
    progessEchart:function() { // 工单进度监控，非管理员
      const xData = ['未执行','执行中','已完工'];
      const yData = [this.taskProgressCount.WZX?this.taskProgressCount.WZX:0,this.taskProgressCount.ZXZ?this.taskProgressCount.ZXZ:0,this.taskProgressCount.YWG?this.taskProgressCount.YWG:0]
      const total = String(this.taskProgressCount.TOTAL?this.taskProgressCount.TOTAL:0)
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#FF7271','#FEC319','#41DC83'],
        legendData: ['未执行','执行中','已完工'],
        grName: total,
        title:'全部工单',
        criRadius:['62%', '80%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'30%',
        },
        grid:{
          top: '0px', left: '6%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return charDataPie;
    },
    manageProgessEchart:function() {
      const xData = ['未执行','执行中','已完工'];
      const yData = [this.taskProgressCount.WZX?this.taskProgressCount.WZX:0,this.taskProgressCount.ZXZ?this.taskProgressCount.ZXZ:0,this.taskProgressCount.YWG?this.taskProgressCount.YWG:0];
      const total = String(this.taskProgressCount.TOTAL?this.taskProgressCount.TOTAL:0)
      const manageCharDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#FF7271','#FEC319','#41DC83'],
        legendData: ['未执行','执行中','已完工'],
        grName: total.toString(),
        title:'计划工单',
        criRadius:['62%', '80%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'30%',
        },
        grid:{
          top: '0px', left: '6%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return manageCharDataPie;
    },
    manageLsProgessEchart:function() {
      const xData = ['未执行','执行中','已完工'];
      const yData = [this.taskProgressCount.WZX?this.taskProgressCount.WZX:0,this.taskProgressCount.ZXZ?this.taskProgressCount.ZXZ:0,this.taskProgressCount.YWG?this.taskProgressCount.YWG:0];
      const total = String(this.taskProgressCount.TOTAL?this.taskProgressCount.TOTAL:0)
      const manageCharDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#FF7271','#FEC319','#41DC83'],
        legendData: ['未执行','执行中','已完工'],
        grName: total.toString(),
        title:'临时工单',
        criRadius:['62%', '80%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'30%',
        },
        grid:{
          top: '0px', left: '6%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return manageCharDataPie;
    }
  },
  methods: {
    ...mapMutations(["userDataSet"]),
    // 获取工单概况
    getOverviewData () {
      this.$api.getOverviewData({
        "roleId": this.userData.roleId,
        "batchId": this.userData.batchId,
        "userId": this.userData.userId,
        "orgId": this.userData.orgId,
      })
        .then(res => {
          this.overviewMap = this.overviewMap.map(item => {
            item.count = res.data[item.key];
            return item;
          })
        })
    },
    // 工单完成情况
    getCompletion() {
      this.$api.getTaskCompletionCount(this.userData).then((res) => {
        if(res.code == 0) {
          this.taskComplete = res.data;
          this.taskStatistics = this.taskStatistics.map(statisticItem => {
            statisticItem.count = res.data.reduce((prev, item) => {
              prev += item[statisticItem.apiKeys]
              return prev
            }, 0)
            return statisticItem;
          })
        }else {
          this.taskComplete = []
        }
      })
    },
    // 去往工单列表
    goTaskList(statisticsTab) {
      let taskStatistics = this.taskStatistics.map(statisticItem => {
        statisticItem.apiKeys === statisticsTab.apiKeys ? (statisticItem.isSelected = true): (statisticItem.isSelected = false);
        return statisticItem
      })
      uni.navigateTo({
        url: '/pages/workBench/taskMonitor/taskMonitor?taskStatistics=' + JSON.stringify(taskStatistics)
      })
    },
    // 获取待办数量
    getToDoNum() {
      let params = {
        userName:this.userData.userName,
        batchId:this.userData.batchId,
        userId:this.userData.userId
      }
      this.$api.getTaskListByTodoNum(params).then(res => {
        if (res.code == 0) {
          if(res.data == 99) {
            this.todoNum = '99+'
          }else {
            this.todoNum = res.data;
          }
        }
      })
    },
    // 工单进度监控
    getMission() {
      let params = {
        userId:this.userData.userId,
        userName:this.userData.userName,
        roleId:this.userData.roleId,
        batchId:this.userData.batchId,
        task_typeflag: this.taskCurrent.index
      }
      this.$api.getTaskProgressCount(params).then((res) => {
        if(res.code == 0) {
          this.taskProgressCount = res.data
        }else {
          this.taskProgressCount = [

          ]
        }
      })
    },
    // 管理员工单进度监控
    getGly() {
      let params = {
        userId:this.userData.userId,
        userName:this.userData.userName,
        roleId:this.userData.roleId,
        batchId:this.userData.batchId,
        task_typeflag: this.glyTaskCurrent.index
      }
      this.$api.getTaskProgressCount(params).then((res) => {
        this.taskProgressCount = res.data
      })
    },
    openPopver() {
      this.showPicker = true
    },
    pickerConfirm(v) {
      this.titleSelect = v.text
      this.showPicker = false
    },
    chooseMenu(item) {
      switch(item.title) {
        case '工单领取': {
          uni.navigateTo({
            url: '/pages/workBench/tourTask/getTourTask/patrolReceive'
          })
          break;
        }
        case '计划工单': {
          uni.navigateTo({
            url: '/pages/workBench/tourTask/taskMonitor/patrolTaskMonitor'
          })
          break;
        }
        case '临时工单': {
          uni.navigateTo({
            url: '/pages/workBench/temporaryTask/taskMonitor/patrolTaskMonitor'
          })
          break;
        }
        case '待办工单': {
          uni.navigateTo({
            url: '/pages/workBench/todoTask/todoTask'
          })
          break;
        }
        case '已办工单': {
          uni.navigateTo({
            url: '/pages/workBench/completedTask/completedTask'
          })
          break;
        }
        case '工单审批': {
          uni.navigateTo({
            url: '/pages/workBench/taskApproval/taskApproval'
          })
          break;
        }
        case '工单监控': {
          let taskStatistics = this.taskStatistics.map(statisticItem => {
            statisticItem.isSelected = false
            return statisticItem
          })
          uni.navigateTo({
            url: '/pages/workBench/taskMonitor/taskMonitor?taskStatistics=' + JSON.stringify(taskStatistics)
          })
          break;
        }
      }
    },
    chooseTask(currentTab) {
      this.taskCurrent = currentTab
      this.titleManage = currentTab.title
      this.getMission()
    },
    glyChooseTask(currentTab) {
      this.titleManage = currentTab.title
      this.glyTaskCurrent = currentTab
      this.getGly()
    },

    exitBtn() {
      baseConfig.actions.exitIgw();
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .nav {
    width: 100vw;
    height: px2vh(163);
    background: #417ADC;
    position: relative;
    .left-title,.right-btn {
      padding-top: px2vh(75);
      font-weight: bold;
      line-height: px2vh(50);
      height: px2vh(54);
      font-size: px2vh(54);
      color: #fff;
      img {
        width: px2vw(44);
        height: px2vh(28);
        vertical-align: middle;
      }
    }
    .left-title {
      float: left;
      margin-left: px2vw(40);
    }
    .right-btn {
      font-weight: normal;
      float: right;
      font-size: px2vh(45);
      margin-right: px2vw(50);
    }
  }
  .header-bar {
    width: 100vw;
    height: px2vh(150);
    border-radius: 0 0 px2vw(40) px2vw(40);
    background: #417ADC;
    margin-bottom: px2vh(230);
    .menu {
      width: px2vw(1020);
      height: px2vh(330);
      background-image: url('../../static/img/sybj.png');
      background-size: px2vw(1020) px2vh(330);
      margin-left: px2vw(30);
      li {
        width: calc(1 * (100% - #{px2vw(300)}) / 5);
        height: 100%;
        margin-left: px2vw(50);
        float: left;
        position: relative;
        img {
          width: px2vw(146);
          height: px2vw(146);
          margin-top: px2vh(54);
        }
        .title-menu {
          font-size: px2vw(36);
          color: #333;
        }
        .todoNum {
          display: inline-block;
          width: px2vw(40);
          height: px2vw(40);
          background: #f00;
          font-size: px2vw(30);
          color:#fff;
          text-align: center;
          border-radius: 100%;
          position: absolute;
          top: px2vh(50);
          left: px2vh(100);
        }
      }
    }
  }
  .home-main {
    width: 100vw;
    height: calc(100vh - #{px2vh(700)});
    overflow: auto;
    .title-home {
      width: px2vw(1020);
      font-weight: bold;
      font-size: px2vw(40);
      color: #666;
      text-indent: 0.5em;
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
    }
    .task-complate {
      width: px2vw(1020);
      // height: px2vh(600);
      background: #fff;
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
      padding-top: px2vh(40);
      border-radius: $border-radius-base;
      overflow: hidden;
      .task-statistics {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: px2vh(10);
        padding-bottom: px2vh(40);
        .statistics-item {
          width: px2vw(293);
          height: px2vw(175);
          margin: 0 px2vw(15) 0;
          background-color: rgba(65,122,220, 0.05);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .item-num {
            font-size: px2vw(62);
            font-weight: bold;
            color: #666666;
          }
          .item-title {
            font-size: px2vw(32);
            color: #666666;
          }
        }
      }
      .overview-wrap {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding-top: px2vh(32);
        padding-bottom: px2vh(60);
        .Overview-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .item-num {
            font-size: px2vw(62);
            font-weight: bold;
            color: #666666;
          }
          .item-title {
            font-size: px2vw(32);
            color: #666666;
          }
        }
      }

      .task-switch {
        width: px2vw(366);
        display: flex;
        height: px2vh(72);
        margin-left: px2vw(40);
        margin-bottom: px2vh(30);
        li {
          width: calc(1 * (100% - #{px2vw(4)}) / 2);
          background: rgba(65,122,220,0.1);
          height: px2vh(70);
          float: left;
          font-size: px2vw(30);
          text-align: center;
          line-height: px2vh(70);
          border: px2vw(2) solid #417ADC;
          color: #417ADC;
        }
        .selectmenu {
          height: px2vh(74);
          border:none;
          background: #417ADC;
          color: #fff;
        }
      }
      .manage-task-switch {
        width: px2vw(552);
        height: px2vh(72);
        margin-left: px2vw(40);
        margin-bottom: px2vh(30);
        li {
          width: calc(1 * (100% - #{px2vw(12)}) / 3);
          background: rgba(65,122,220,0.1);
          height: px2vh(70);
          float: left;
          font-size: px2vw(30);
          text-align: center;
          line-height: px2vh(70);
          border: px2vw(2) solid #417ADC;
          color: #417ADC;
        }
        .selectmenu {
          height: px2vh(74);
          border:none;
          background: #417ADC;
          color: #fff;
        }
      }
      .task-echarts {
        width: calc(100% - #{px2vw(40)});
        margin-left: px2vw(20);
        height: calc(100% - #{px2vh(122)});
      }
    }
  }
}
</style>
